<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/1/17
  Time: 12:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>会议室管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script>
        //一般直接写在一个js文件中
        layui.use(['layer', 'form','element','table','jquery'], function(){
            var layer = layui.layer
                ,form = layui.form
                ,element=layui.element
                ,table=layui.table
                ,$=layui.jquery
            // 初始化加载
            getList('#meeting1', 1)
            // 监听tab切换 操作：文档 - 内置模块 - 常用元素操作 element - 监听tab切换
            element.on('tab(tab-all)', function (data) {
                // console.log(this);        // 当前Tab标题所在的原始DOM元素
                // console.log(data.index);  // 得到当前Tab的所在下标
                // console.log(data.elem);   // 得到当前的Tab大容器
                var status = $(this).attr('data-status')
                var position = '#meeting1'
                console.log(status);
                switch (status) {
                    case '1': position = '#meeting1'; break;
                    case '3': position = '#meeting2'; break;
                    case '5': position = '#meeting'; break;
                    default: position = '#meeting1';
                }
                console.log(position);
                getList(position, status)
            })

            // 公共方法
            function getList(position, status = '') {
                if (status==5) {
                    table.render({
                        elem: position
                        , url: '${pageContext.request.contextPath}/selectMeetingByPage'
                        //, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                        ,toolbar:"#toolbarDemo"
                        , cols: [[
                            {type:'checkbox',title: '选择'}
                            ,{ field: 'id', title: '编号',align:"center"}
                            , { field: 'name', title: '会议室名称',align:"center" }
                            , { field: 'description', title: '会议室描述',align:"center" }
                            ,{title:"操作",templet:"#caoZuoTemplet",align:"center"}
                        ]]
                        , page: true
                    });
                }
                if (status==1) {
                    table.render({
                        elem: position
                        , url: '${pageContext.request.contextPath}/selectMeetingByPage'
                        , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                        ,toolbar:"#toolbarDemo1"
                        , cols: [[
                            {type:'checkbox',title: '选择'}
                            ,{ field: 'id', title: '编号',align:"center"}
                            , { field: 'name', title: '会议室名称',align:"center" }
                            , { field: 'description', title: '会议室描述',align:"center" }

                        ]]
                        , page: true
                    });
                }
                if (status==3) {
                    table.render({
                        elem: position
                        , url: '${pageContext.request.contextPath}/selectReserveByPage'
                        , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                        ,toolbar:"#toolbarDemo2"
                        , cols: [[
                            {type:'checkbox',title: '选择'}
                            ,{ field: 'id', title: '编号',align:"center"}
                            , { field: 'meeting_id', title: '会议室名称',align:"center" }
                            , { field: 'startdate', title: '会议室起始时间',align:"center" }
                            , { field: 'enddate', title: '会议室结束时间',align:"center" }
                            , { field: 'type', title: '会议室用途',align:"center" }
                            , { field: 'record', title: '记录人',align:"center" }
                            , { field: 'use', title: '预订人',align:"center" }
                            , { field: 'reservedate', title: '预定时间',align:"center" }

                        ]]
                        , page: true
                    });
                }
            }
            //监听会议室管理表
            table.on('toolbar(meetingFilter)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                if (obj.event=="add") {

                    form.render(); //更新全部
                    $("#addform")[0].reset()//清空表单
                    //alert("ooo")
                    layer.open({
                        type: 1,
                        content: $('#addform')
                    })
                }else if (obj.event=="search") {
                    alert(0)
                    console.log(obj)
                    console.log(checkStatus)

                }
                /*监听添加工具栏======end*/
            });
            //监听会议室预定表
            table.on('toolbar(meeting1Filter)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                if (obj.event=="search") {
                    //alert(0)
                    //console.log(obj)
                   // console.log(checkStatus.data.length)
                    var startdate=$("#startdate").val()
                    var enddate=$("#enddate").val()
                    var use=$("#use").val()
                    var type=$("#type").val()
                   /* console.log(startdate)
                    console.log(enddate)*/
                    if (checkStatus.data.length !=0) {
                        $.ajax({
                            url:"${pageContext.request.contextPath}/insertReserve",
                            data:{"meeting_id":checkStatus.data[0].id,"startdate":startdate,"enddate":enddate,"use":use,"type":type},
                            success:function (data) {
                                if (data.isAdd) {
                                    //关闭弹出框
                                    layer.closeAll()
                                    //提示
                                    layer.msg('预定成功')
                                }else {
                                    layer.open({
                                        content:"输入有误,请重新输入"
                                    });
                                }
                            }

                        })
                    }else {
                        layer.msg("请选择会议室")
                    }


                }
                /*监听添加工具栏======end*/
            });

            //监听会议室预定管理表
            table.on('toolbar(meeting2Filter)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                if (obj.event=="search") {
                    //alert(0)
                    //console.log(obj)
                    // console.log(checkStatus.data.length)
                    var startdate=$("#start").val()
                    var enddate=$("#end").val()
                    var use=$("#use1").val()
                    var type=$("#type1").val()
                    var meeting_id=$("#meetingid").val()
                    /* console.log(startdate)
                     console.log(enddate)*/

                    table.reload('meeting2', {
                        url: '${pageContext.request.contextPath}/selectReserveByPage'
                        ,where: {"meeting_id":meeting_id,"startdate":startdate,"enddate":enddate,"use":use,"type":type} //设定异步数据接口的额外参数
                        //,height: 300
                    });


                }else if (obj.event=="qu") {
                    if (checkStatus.data.length == 0) {
                        layer.msg("请选择会议室")
                    }else {
//gjgj
                        layer.confirm('真的取消会议室预定吗', function(index){
                            //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.close(index);
                            //向服务端发送删除指令
                            $.ajax({
                                url:"${pageContext.request.contextPath}/deleteReserve",
                                data:{"id":checkStatus.data[0].id},
                                success:function (data) {
                                    //layer.close(index);
                                    //重载table
                                    table.reload('meeting2');
                                }
                            })

                        });

                    }
                }
                /*监听添加工具栏======end*/
            });

            form.on('submit(submitFilter)', function(data){
                //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                $.ajax({
                    url:"${pageContext.request.contextPath}/insertMeeting",
                    data:data.field,
                    success:function (data) {
                        if (data.isAdd) {
                            //关闭弹出框
                            layer.closeAll()
                            //重载tablem
                            table.reload('meeting');
                        }else {
                            layer.open({
                                content:"输入有误,请重新输入"
                            });
                        }
                    }

                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            /*监听添加工具栏======end*/


            //监听行工具栏
            table.on('tool(meetingFilter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                        $.ajax({
                            url:"${pageContext.request.contextPath}/deleteMeeting",
                            data:{"id":data.id}
                        })
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //console.log(data.departmentId)
                    //发送ajax根据id查对象
                    $.ajax({
                        url:"${pageContext.request.contextPath}/selectOneMeeting"
                        ,async:false
                        ,data:{"id":data.id}
                        ,success:function (da) {
                            //给表单赋值
                            // alert(data)
                            //console.log(da)

                            form.render()
                            form.val('updateFormFilter', da.meeting);

                        }
                    })
                    //form.render(); //更新全部
                    //弹出修改表单
                    layer.open({
                        type: 1,
                        content: $('#updateForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        /* ,end:function(){
                             window.location.reload();
                         }*/
                    });


                }
            });
            /*//监听行工具栏=========end*/


            //监听修改状态修改表单内容
            form.on('submit(updateSubmitFilter)', function(data){
                /*console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}*/
                $.ajax({
                    url:"${pageContext.request.contextPath}/updateMeeting"
                    ,data:data.field
                    ,success:function (data) {
                        var msg="修改失败"
                        if (data.isUpdate) {
                            msg="修改成功"
                            layer.closeAll()
                            table.reload('meeting');
                        }
                        layer.msg(msg)
                    }
                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        });



    </script>


    <!--/*自定义行操作模板*/-->
    <script type="text/html" id="caoZuoTemplet">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <!--/*自定义头工具栏模板*/-->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        </div>
    </script>
    <!--/*自定义头工具栏模板*/-->
    <script type="text/html" id="toolbarDemo1">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 120px;">预定时间段：</label>
            <div class="layui-input-inline" >
                <input type="date" name="startdate" lay-verify="required" id="startdate"  class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">to</label>
            <div class="layui-input-inline" >
                 <input type="date" name="enddate" lay-verify="required"  id="enddate" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 130px;">会议室预订人：</label>
            <div class="layui-input-inline" >
                <input type="text" name="use" lay-verify="required" id="use" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 100px;">会议类型：</label>
            <div class="layui-input-inline" style="width: 100px;">
                <select name="type" lay-filter="type" id="type">
                    <option value="">请选择</option>
                    <option value="会议">会议</option>
                    <option value="年会">年会</option>
                </select>
            </div>
            <button class="layui-btn layui-btn-sm" lay-event="search">预定</button>
        </div>
    </script>

    <!--/*自定义头工具栏模板*/-->
    <script type="text/html" id="toolbarDemo2">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 120px;">预定时间段：</label>
            <div class="layui-input-inline" >
                <input type="date" name="startdate" lay-verify="required" id="start"  class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">to</label>
            <div class="layui-input-inline" >
                <input type="date" name="enddate" lay-verify="required"  id="end" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label" style="width: 100px;">预订人：</label>
            <div class="layui-input-inline" style="width: 80px;">
                <input type="text" name="use" lay-verify="required" id="use1" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 130px;">会议室名称：</label>
            <div class="layui-input-inline" style="width: 80px;">
                <input type="text" name="use" lay-verify="required" id="meetingid" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 100px;">会议类型：</label>
            <div class="layui-input-inline" style="width: 100px;">
                <select name="type" lay-filter="type" id="type1">
                    <option value="">请选择</option>
                    <option value="会议">会议</option>
                    <option value="年会">年会</option>
                </select>
            </div>
            <button class="layui-btn layui-btn-sm" lay-event="search">查询</button>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm" lay-event="qu">取消预定</button>
        </div>
    </script>
</head>
<body>



<div class="layui-tab" lay-filter="tab-all">
    <ul class="layui-tab-title">
        <li data-status="1" class="layui-this">会议室预定</li>
        <li data-status="3">会议室预定管理</li>
        <li data-status="5">会议室管理</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <table id="meeting1" lay-filter="meeting1Filter"></table>
        </div>
        <div class="layui-tab-item">
            <table id="meeting2" lay-filter="meeting2Filter"></table>
        </div>
        <div class="layui-tab-item">
            <table id="meeting" lay-filter="meetingFilter"></table>
        </div>
    </div>
</div>

<!--//添加表单-->
<form class="layui-form" style="display: none;" id="addform" lay-filter="formFilter"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">会议室名称:</label>
        <div class="layui-inline">
            <input type="text" name="name" lay-verify="required" placeholder="请输入会议室名称"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">会议室描述:</label>
        <div class="layui-inline">
            <input type="text" name="description" lay-verify="required" placeholder="请输入会议室描述"  class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="submitFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>


<!--//修改表单-->
<form class="layui-form" style="display: none;" id="updateForm" lay-filter="updateFormFilter"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">会议室名称:</label>
        <div class="layui-inline">
            <input type="hidden" id="id"  name="id" value="">
            <input type="text" name="name" lay-verify="required" placeholder="请输入会议室名称"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">会议室描述:</label>
        <div class="layui-inline">
            <input type="text" name="description" lay-verify="required" placeholder="请输入会议室描述"  class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateSubmitFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
</body>
</html>
